<template>
  <div style="height:100%">
    <div class="penalrow selectw100">
      <div class="inlineblock verticalmiddle infoitem" style="width:33%;">
        <div class="inlineblock verticalmiddle">
          开始日期
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker size="mini" v-model="demand.startDate" type="date" placeholder="选择起始日期" style="width:100%;"
            value-format="yyyy-MM-dd" @change = "init(readQuery,'search')">
            <!--@change = "changeTime"-->
          </el-date-picker>
        </div>
      </div>
      <div class="inlineblock verticalmiddle infoitem" style="width:33%;">
        <div class="inlineblock verticalmiddle">
          结束日期
        </div>
        <!--:picker-options="pickerenddatefanwei"-->
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker size="mini" v-model="demand.endDate" 
            type="date" placeholder="选择结束日期" style="width:100%;" value-format="yyyy-MM-dd"  @change = "init(readQuery,'search')">
          </el-date-picker>
        </div>
      </div>
      <el-button type="warning" size="mini" @click="init(readQuery,'search')">搜索</el-button>
      <div class="basicRightDistanceA" style="position:absolute;">

      </div>
    </div>
    <div style="width:100%;height:calc(100% - 50px);">
      <el-table :data="useRecordTableDate" style="width: 100%;height:calc(100% - 30px)" class="tableCon"  size="mini" key="useRecordTableDate">
        <el-table-column label="序号" min-width="50px">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column property="code" label="检测单号" min-width="135px">
        </el-table-column>
        <el-table-column property="detectabilityName" label="能力参数" min-width="135px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column property="createByName" label="创建人" min-width="80px">
        </el-table-column>
        <el-table-column property="checkerName" label="校核人" min-width="80px">
            <template slot-scope="scope">
              {{scope.row.checkerName == undefined ? "---":scope.row.checkerName}}
            </template>
        </el-table-column>
         <el-table-column property="status" label="状态"  min-width="80px" :formatter="formatterStatus">
        </el-table-column>
        <el-table-column property="createTime" label="创建时间" min-width="145px" :formatter="formatterDate">
           
        </el-table-column>
        <el-table-column label="操作"  min-width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click = "lookRecord(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block changepages">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20, 30, 40]"
          :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
        </el-pagination>
      </div>
    </div>
    <user-record :addVisible.sync="equipCheckShow" :testpanelData="testpanelData"></user-record>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  const userRecord = () => import('../../../../detectionprocess/testmanage/children/userRecord.vue');
  export default {
    props: { useRecordData: Object },
    data() {
      var that = this
      return {
        readQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        tableHeightD: ((window.innerHeight - 300) / 3 - 25),
       
        demand: {
          id: '',
          startDate: '',
          endDate: '',
        },
        pickerenddatefanwei: {
          disabledDate: function (time) {
            if (that.demand.startDate != '') {
              var startDate = new Date(that.demand.startDate)
							return (time.getTime() < startDate.getTime() - 8.64e7);
						}
          }
        },
        //使用记录
        useRecordTableDate: [],
        rowNumber: 0,
        equipCheckShow:false,
        testpanelData:{},
      }
    },
    computed: {
      ...mapState(['testBatchStatus']),
      tabDivHeight() {
        return (window.innerHeight - 460)
      }
    },
    mounted() {
      this.demand.id = this.useRecordData.id
      this.init(this.readQuery)
    },
    components: {
        userRecord
    },
    watch: {
      readQuery: {
        handler(val, oldVal) {
          this.init(this.readQuery)
        },
        deep: true
      },
    },
    methods: {
      // 处理状态
      formatterStatus(row, column, cellValue, index) {
        return this.util.changeStatus({ cellValue: cellValue, list: this.testBatchStatus })
      },
      // 处理时间
			formatterDate(row, column, cellValue) {
				if(cellValue == '' || cellValue == undefined || cellValue == null){
					return ''
				}else{
					return cellValue.substring(0, 16)
				}
			},
      changeTime(){
        this.demand.endDate = ''
        this.init(this.readQuery,'search')
      },
      init(parp,search) {
        this.demand.page = parp.page;
        this.demand.pageCount = parp.pageCount;
        if (search != undefined) {
						this.readQuery.page = 1;
						this.demand.page = 1;
						this.demand.pageCount = parp.pageCount;
					} else {
            this.demand.page = parp.page;
						this.demand.pageCount = parp.pageCount;
					}
        this.$http({
          apiUrl: 'resource/readEquipmentUseList.htm',
          method: 'get',
          params: this.demand,
        }).then(res => {
          if (res.code == 0) {
            this.useRecordTableDate = res.data
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }
        })
      },
      lookRecord(row){
          console.log(row)
          this.testpanelData = row
          this.equipCheckShow = true;
      },
      handleSizeChange(val) {
        this.readQuery.pageCount = val;
      },
      handleCurrentChange(val) {
        this.readQuery.page = val;
      },
    }
  }

</script>

<style>

</style>